<!-- pages/login/components/mobile.vue -->

<script setup>
	import { verifyCodeApi, loginByMobileApi } from '@/services/user.js'
	import { ref } from 'vue'
	// 导入倒计时组件
	import countDown2 from '@/components/count-down2/count-down2.vue'

	import { useUserStore } from '@/stores/user'

	// 用户相关的数据
	const userStore = useUserStore()

	// 倒计时状态
	const showCountdown = ref(false)

	const formRef = ref(null)
	// 获取验证码按钮
	async function getCode() {
		await formRef.value.validateField(['mobile'])

		const res = await verifyCodeApi({
			mobile: form.value.data.mobile,
			type: 'login',
		})
		console.log(res)
		form.value.data.code = res.rawData.data.code
		// // 检测接口是否调用成功
		if (res.rawData.code !== 10000)
			return uni.utils.toast(res.rawData.message)

		uni.utils.toast('验证码已发送，请查收!')
		showCountdown.value = true
	}

	const form = ref({
		// 表单数据
		data: {
			mobile: '13230000001',
			code: '',
		},
		// 校验规则
		rules: {
			// 手机号校验规则
			mobile: {
				rules: [
					{ required: true, errorMessage: '请填写手机号码' },
					{
						pattern: '^1\\d{10}$',
						errorMessage: '手机号码格式不正确',
					},
				],
			},
			// 验证码校验规则
			code: {
				rules: [
					{ required: true, errorMessage: '请输入验证码' },
					{ pattern: '^\\d{6}$', errorMessage: '验证码格式不正确' },
				],
			},
		},
	})
	// 登录按钮
	const onSubimt = async () => {
		try {
			await formRef.value.validate()
			const {
				rawData: { code, message, data },
			} = await loginByMobileApi(form.value.data)
			if (code !== 10000) return uni.utils.toast(message)
			// 持久化存储 token
			userStore.token = data.token
			// 临时跳转到首页面
			uni.switchTab({
				url: '/pages/index/index',
			})
		} catch (err) {
			console.log(error)
		}
	}
	const isChecked = ref(0)
	const EditisChecked = () => {
		isChecked.value = !isChecked.value
	}
</script>

<template>
	<uni-forms
		class="login-form"
		ref="formRef"
		:model="form.data"
		:rules="form.rules"
	>
		<uni-forms-item name="mobile">
			<uni-easyinput
				v-model="form.data.mobile"
				:input-border="false"
				:clearable="false"
				placeholder="请输入手机号"
				placeholder-style="color: #C3C3C5"
			/>
		</uni-forms-item>
		<uni-forms-item name="code">
			<uni-easyinput
				v-model="form.data.code"
				:input-border="false"
				:clearable="false"
				placeholder="请输入验证码"
				placeholder-style="color: #C3C3C5"
			/>
			<view v-if="showCountdown" style="display: flex; color: #afafb0">
				<countDown2
					:seconds="60"
					@timup="showCountdown = false"
				/>s后重新获取验证码
			</view>
			<text v-else class="text-button" @click="getCode">获取验证码</text>
		</uni-forms-item>

		<view class="agreement" @click="EditisChecked">
			<radio
				@click="EditisChecked"
				:checked="isChecked"
				color="#16C2A3"
			/>
			我已同意
			<text class="link">用户协议</text>
			及
			<text class="link">隐私协议</text>
		</view>

		<button class="uni-button" @click="onSubimt">登 录</button>
	</uni-forms>
</template>

<script>
	export default {
		name: 'MobilePages',
		options: {
			styleIsolation: 'shared',
		},
	}
</script>

<style lang="scss">
	@import './styles.scss';
</style>
